<!DOCTYPE html>
<html>
    <head>
        <title>Slides of elements</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var counter = 0;
                var arrayOfWords = [ "Lorem", "ipsum", "dolor", "sit", "consectetur","adipiscing", "elit", "maecenas", "enim", "praesent." ];
                $("#appendWord").click(function() {
                    if (counter >= arrayOfWords.length ) {
                        $("#state").append("<br>");
                    };
                    $("#state").append(currentWord);
                    $("#state").append(" ");
                });

                function currentWord() {
                    if (counter >= arrayOfWords.length ) {
                        counter = 0;
                    };
                    return arrayOfWords[counter++];
                }

                $("#secondDiv > p").click(function() {
                    $(this).remove() ;
                });

                $("#thirdDiv > p").click(function() {
                    $detached = $(this).detach();
                    $("#secondDiv").children().last().after($detached);

                });

                $("#fourthDiv > p").click(function() {
                    $(this).replaceWith("<p><b>" + $(this).html() + "</b></p>");
                });

                $("#foreachexample").click(function() {
                    $("#fourthDiv > p").each(function() {
                        $(this).append($("#fourthDiv > p").first().html());
                    })
                });

            })
        </script>
    </head>
    <body>
        <input id="appendWord" type="button" value="Append Word" />
        <div id="state" style="color: cadetblue; "></div>
        <div id="secondDiv" style="font-family: sans-serif; font-size: 12px; margin: 40px; width: 400px; padding: 20px;background-color: greenyellow; border-width: 1px; border-color: black; border-style: solid" >

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <p>Maecenas enim enim, condimentum vel tristique id, feugiat vitae ipsum.
            <p>Praesent ultrices fermentum quam, sit amet pellentesque leo semper ut.
            <p>Pellentesque ipsum orci, ornare quis tempus sit amet, scelerisque in mi.
            <p>Integer pulvinar semper pharetra.
            <p>Vivamus sodales tristique felis, sit amet tristique erat tempor et.
            <p>Vivamus dictum hendrerit placerat. Ut a sollicitudin elit.


        </div>
        <div id="thirdDiv" style="font-family: sans-serif; font-size: 12px; margin: 40px; width: 400px; padding: 20px;background-color: springgreen; border-width: 1px; border-color: black; border-style: solid" >

            <p>Sed ut purus ligula, et ultricies elit.
            <p>Aliquam in mauris neque, et adipiscing quam.
            <p>Phasellus porta sem sed lacus faucibus porttitor non et nisi.
            <p>Duis lacinia vestibulum lacus, at tristique risus egestas sed.
            <p>Aliquam euismod commodo ornare.
            <p>Duis laoreet sagittis urna, sed convallis neque commodo ac.
            <p>Duis tincidunt nibh eros. Integer lobortis vulputate ligula vel porttitor.

        </div>
        <div id="fourthDiv" style="font-family: sans-serif; font-size: 12px; margin: 40px; width: 400px; padding: 20px;background-color: coral; border-width: 1px; border-color: black; border-style: solid" >

            <p>Sed ut purus ligula, et ultricies elit.
            <p>Aliquam in mauris neque, et adipiscing quam.
            <p>Phasellus porta sem sed lacus faucibus porttitor non et nisi.
            <p>Duis lacinia vestibulum lacus, at tristique risus egestas sed.
            <p>Aliquam euismod commodo ornare.
            <p>Duis laoreet sagittis urna, sed convallis neque commodo ac.
            <p>Duis tincidunt nibh eros. Integer lobortis vulputate ligula vel porttitor.

        </div>
        <input id="foreachexample" type="button" value="For each example" />
    </body>
</html>
